<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>图书列表</title>
  <style>
    body {
      text-align: center;
    }
    table {
      margin: 0 auto;
      border-collapse: collapse;
      width: 80%;
      border: 2px solid #3399ff;
    }

    th,
    td {
      border: 1px solid #3399ff;
      padding: 10px;
      text-align: center;
    }

    th {
      background-color: #007acc;
      color: white;
    }

    tr:nth-child(even) {
      background-color: #e6f2ff;
    }

    tr:hover {
      background-color: #b3d9ff;
    }

    a {
      display: inline-block;
      text-decoration: none;
      color: #007bff;
      padding: 10px;
      border: 1px solid #007bff;
      border-radius: 5px;
      transition: all 0.3s ease;
      white-space: nowrap;
      /* 防止内容过长时换行 */
    }

    a:hover {
      background-color: #007bff;
      color: white;
    }

    .del {
      display: inline-block;
      text-decoration: none;
      color: #FF4500;
      padding: 10px;
      border: 1px solid #FF4500;
      border-radius: 5px;
      transition: all 0.3s ease;
      white-space: nowrap;
      /* 防止内容过长时换行 */
    }

    .del:hover {
      background-color: #FF4500;
      color: white;
    }

    .search-container {
      text-align: center;
      margin-top: 20px;
    }

    .search-input {
      width: 300px;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 3px;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  </head>
  <body>
    <% include ../header.ejs %>
  <h1 style="text-align: center">图书列表</h1>
  <!-- <a href="/">首页</a> -->
  <a href="/book/insert">添加数据</a>
  <div class="search-container">
    <input class="search-input" type="text" placeholder="输入关键词搜索">
    <button onclick="searchBooks()">搜索</button>
  </div>
  <br />
  <table width="100%">
    <thead>
      <tr>
        <th>ID</th>
        <th>书名</th>
        <th>作者</th>
        <th>出版社</th>
        <th>删除</th>
        <th>编辑</th>
      </tr>
    </thead>
    <tbody>
      <%data.forEach(function (item, index) { %>
        <tr>
          <td>
            <%= item.id %>
          </td>
          <td>
            <%= item.bookname %>
          </td>
          <td>
            <%= item.author %>
          </td>
          <td>
            <%= item.press %>
          </td>
          <td><a class='del' href="/book/delete/<%= item.id %>">删除</a></td>
          <td><a href="/book/edit/<%= item.id %>">编辑</a></td>
        </tr>
        <% }); %>
    </tbody>
  </table>
  </body>
  <script>
    function searchBooks() {
      const keyword = document.querySelector('.search-input').value;
      if (keyword) {
        $.ajax({
          url: `/book/search/${keyword}`,
          type: 'GET',
          success: function (books) {
            // 将查询结果赋值给 data
            data = books;
            // 更新页面上的表格或其他展示区域
            updateTable(data);
          },
          error: function (error) {
            // 显示错误消息
            $('table').html('<tr><td colspan="6">加载图书列表失败，请稍后重试。</td></tr>');
            console.error(error);
          }
        });
      } else {
        window.location.href = `/book`;
      }
    }
    function updateTable(data) {
      // 清空现有表格内容
      $('table tbody').empty();
      // 如果数据为空，显示提示信息
      if (data.length === 0) {
        $('table tbody').append('<tr><td colspan="6">未找到相关图书。</td></tr>');
        return;
      }
      // 遍历数据并构建表格行
      $.each(data, function (index, item) {
        var row = "<tr>" +
          "<td>" + item.id + "</td>" +
          "<td>" + item.bookname + "</td>" +
          "<td>" + item.author + "</td>" +
          "<td>" + item.press + "</td>" +
          "<td><a class='del' href='/book/delete/" + item.id + "'>删除</a></td>" +
          "<td><a href='/book/edit/" + item.id + "'>编辑</a></td>" +
          "</tr>";
        $('table tbody').append(row);
      });
    }
  </script>

</html>